// ********** 基础配置 **********
$border-color:#ebedf0; // 默认边框色
$border-radius:0; // 默认圆角
$border-alpha:1.0; // 默认透明度


// ********** 根据像素比缩放1px边框 **********
$border-1px-scale:1;
$border-all-width:100%;
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
    $border-1px-scale:0.5;
    $border-all-width:200%;
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
    $border-1px-scale:0.33;
    $border-all-width:330%;
}


//********** 基础元素 1px 边框 ************
// 使用 after 伪类与 transform、@media 解决移动端 2倍屏、3倍屏 1像素边失真问题； 
// 可自定义边框色、透明度、圆角
// 使用方法：include border-1px
// 适用范围：不支持表单元素 input、select、textarea
//  $color  自定义边颜色
//  $alpha  自定义透明度
//  $radius 自定义圆角（仅 border-1px 支持圆角）


// 上边框
@mixin border-top-1px ($color:$border-color,$alpha:$border-alpha){
   position: relative;
   &::after{
       content:"";
       position: absolute;
       top:0;
       left:0;
       background-color: rgba($color, $alpha);
       box-sizing: border-box;
       display:block;
       width:100%;
       height:1px;
       transform:scale(1,$border-1px-scale);
   }
}

// 下边框
@mixin border-bottom-1px ($color:$border-color,$alpha:$border-alpha){
   position: relative;
   &::after{
       content:"";
       position: absolute;
       bottom:0;
       left:0;
       background-color: rgba($color, $alpha);
       box-sizing: border-box;
       display:block;
       width:100%;
       height:1px;
       transform:scale(1,$border-1px-scale);
   }
}

// 左边框
@mixin border-left-1px ($color:$border-color,$alpha:$border-alpha){
    position: relative;
    &::after{
        content:"";
        position: absolute;
        top:0;
        left:0;
        background-color: rgba($color, $alpha);
        box-sizing: border-box;
        display:block;
        height:100%;
        width:1px;
        transform:scaleX(1,$border-1px-scale);
    }
}

// 右边框
@mixin border-right-1px ($color:$border-color,$alpha:$border-alpha){
    position: relative;
    &::after{
        content:"";
        position: absolute;
        top:0;
        right:0;
        background-color: rgba($color, $alpha);
        box-sizing: border-box;
        display:block;
        height:100%;
        width:1px;
        transform:scaleX(1,$border-1px-scale);
    }
}

// 全边框
@mixin border-1px ($color:$border-color,$alpha:$border-alpha,$radius:$border-radius){
    position: relative;
    border-radius:$radius;
    overflow:hidden;
    &::after{
        content:'';
        box-sizing: border-box;
        border: 1px solid rgba($color, $alpha);
        border-radius:$radius;

        position:absolute;
        top:0;
        left:0;
        width:$border-all-width;
        height: $border-all-width;
        
        transform-origin: left top;
        transform:scale($border-1px-scale);
    }
}



//************* 表单元素 1px 边框 *************
// 使用 box-shadow 模拟 1px 边框
// 可自定义边框色、透明度、圆角
// 使用方法：include from-border-1px
// 使用范围：仅在表单元素 input、select、textarea 中使用；圆角清晰度不够；


// 表单元素 全边框
@mixin from-border-1px($color:$border-color,$alpha:$border-alpha,$radius:$border-radius){
    border:none;
    box-shadow: 0  -1px 1px -1px  rgba($color, $alpha),
    1px  0  1px -1px  rgba($color, $alpha),
    0  1px  1px -1px  rgba($color, $alpha),
    -1px 0  1px -1px  rgba($color, $alpha);
    border-radius:$radius;
    overflow:hidden;
}




//************ 1px Class类名 *************
// 使用 after 伪类与 transform、@media 解决移动端 2倍屏、3倍屏 1像素边失真问题； 
// 使用方式：直接在 class="" 中使用
// 适用范围：不支持表单元素 input、select、textarea


/*
常规元素 （不支持表单元素 input、select、textarea）
全边框 border-1px
上边框 border-top-1px
下边框 border-bottom-1px
左边框 border-left-1px
有边框 border-right-1px

表单元素 （input、select、textarea）
全边框 from-border-1px
*/

// 上边框
.border-top-1px {
    position: relative;
    &::after{
        content:"";
        position: absolute;
        top:0;
        left:0;
        background-color: rgba($border-color, $border-alpha);
        display:block;
        width:100%;
        height:1px;
        transform:scale(1,$border-1px-scale);
    }
 }
 
 // 下边框
.border-bottom-1px {
    position: relative;
    &::after{
        content:"";
        position: absolute;
        bottom:0;
        left:0;
        background-color: rgba($border-color, $border-alpha);
        display:block;
        width:100%;
        height:1px;
        transform:scale(1,$border-1px-scale);
    }
 }
 
 // 左边框
.border-left-1px {
     position: relative;
     &::after{
         content:"";
         position: absolute;
         top:0;
         left:0;
         background-color: rgba($border-color, $border-alpha);
         display:block;
         height:100%;
         width:1px;
         transform:scaleX(1,$border-1px-scale);
     }
 }
 
 // 右边框
.border-right-1px {
     position: relative;
     &::after{
         content:"";
         position: absolute;
         top:0;
         right:0;
         background-color: rgba($border-color, $border-alpha);
         display:block;
         height:100%;
         width:1px;
         transform:scaleX(1,$border-1px-scale);
     }
 }
 
 // 全边框
.border-1px {
     position: relative;
     border-radius:$border-radius;
     overflow:hidden;
     &::after{
         content:'';
         box-sizing: border-box;
         border: 1px solid rgba($border-color, $border-alpha);
         border-radius:$border-radius;
 
         position:absolute;
         top:0;
         left:0;
         width:$border-all-width;
         height: $border-all-width;
         
         transform-origin: left top;
         transform:scale($border-1px-scale);
     }
 }

 

 // 表单元素 全边框
.from-border-1px{
     border:none;
     box-shadow: 0  -1px 1px -1px  rgba($border-color, $border-alpha),
     1px  0  1px -1px  rgba($border-color, $border-alpha),
     0  1px  1px -1px  rgba($border-color, $border-alpha),
     -1px 0  1px -1px  rgba($border-color, $border-alpha);
     border-radius:$border-radius;
     overflow: hidden;
 }